<template>
  <div :style="style">
    <iframe
      :src="iframeUrl"
      :style="{
        width: width,
        height: height,
        border: 'none'
      }"
    />
  </div>
</template>

<script setup>
import { ref, watch, computed, onMounted } from 'vue'
import visual from "@/visual/js/visual";

const props = defineProps({
  node: Object,
  compStyle: Object,
  compData: Object,
  inputParam: Object
});
const currNode = ref(props.node);
const loading = ref(true);
const iframeUrl = ref('');
const width = ref('');
const height = ref('');

const init = () => {
  const compStyle = props.compStyle || {};
  width.value = compStyle['width'] || '100%';
  height.value = compStyle['height'] || '100%';
};

const loadValue = async() => {
  loading.value = false;
  const dataList = (await visual.loadData(
    props.compData,
    {},
    {inputParam: props.inputParam},
    currNode.value)).data || [];
  currNode.value.compData.dataList = JSON.stringify(dataList);
  iframeUrl.value = dataList.length > 0 && dataList[0]['内容'] || '';
};

const style = computed(() => {
  const compStyle = props.compStyle || {};
  return visual.parseStyle(compStyle);
});

watch(() => props.compStyle, () => {
  init();
  loadValue();
}, {deep: true});

watch(() => props.node.compData?.refresh, () => {
  loadValue();
});

onMounted(() => {
  init();
  loadValue();
});
</script>

<style scoped>
</style>